<script setup lang="ts">
import { onMounted, reactive, computed } from 'vue';
import { navigateTo } from '@tarojs/taro';
import HOME_LASTED_NOTICE from '/@/assets/image/icon/home-lasted-notice.png';
import { MESSAGE_RECORD_QUERY } from '/@/api/modules/base/message-record';
import { filtersText } from '/@/utils/string-util';
const state = reactive<{ active: number; messageRecordList: AppMessageRecord.Dto[] }>({
  active: 0,
  messageRecordList: [],
});

function queryList() {
  MESSAGE_RECORD_QUERY({
    comQuery: { page: 1, pageSize: 3 },
  }).then((res) => {
    state.messageRecordList = res.content || [];
  });
}

onMounted(() => {
  queryList();
});

const filterContent = computed(() => {
  return (value?: string) => filtersText(value);
});
</script>

<template>
  <nut-swiper
    v-if="state.messageRecordList && state.messageRecordList.length"
    class="home-staff-message-record"
    auto-play="3000"
  >
    <nut-swiper-item
      v-for="item in state.messageRecordList"
      :key="item.id"
      class="home-staff-message-record__swiper-item"
      @click="
        navigateTo({
          url: '/pages/msg/list/index',
        })
      "
    >
      <image class="home-staff-message-record__swiper-item__icon" :src="HOME_LASTED_NOTICE" />
      <view>
        <view class="home-staff-message-record__swiper-item__title">{{ item.title }}</view>
        <view class="home-staff-message-record__swiper-item__sub-title">{{
          filterContent(item.content)
        }}</view>
      </view>
    </nut-swiper-item>
  </nut-swiper>
</template>

<style lang="scss">
.home-staff-message-record {
  border-radius: 20px;
  margin-bottom: 20px;
  height: 100px;
  background-color: #fff;

  &__swiper-item {
    display: flex;
    align-items: center;
    padding: 0 20px;
    font-size: 28px;

    &__icon {
      width: 64px;
      height: 64px;
      margin-right: 20px;
      padding-right: 20px;
      border-right: 1px solid #f3f3f3;
    }
    &__title {
      width: 560px;
      font-size: 24px;
      font-weight: bold;
      color: #333;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }

    &__sub-title {
      width: 560px;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      font-size: 20px;
      color: #aaa;
    }
  }
}
</style>
